<template>
  <div class="app-container dialog" v-if="form">
    <div class="title">业务系统基本信息</div>
    <div class="wrap1">
      <div>
        <div>系统名称:</div>{{form.projectname ? form.projectname : ''}}
      </div>
      <div>
        <div>业务部门:</div>{{form.officeName}}
      </div>
      <div>
        <div>上线时间:</div>{{form.onlinetime}}
      </div>
      <div>
        <div>业主方联系人:</div>{{form.contactsNickName}}
      </div>
      <div>
        <div>联系电话:</div>{{form.contactsinfo}}
      </div>
      <div>
        <div>邮箱:</div>{{form.email}}
      </div>
      <div style="width: 100%;">
        <div>承建单位:</div>{{form.constunit}}
      </div>
      <div>
        <div>承建方联系人:</div>{{form.constcts}}
      </div>
      <div>
        <div>联系电话:</div>{{form.constctsinfo}}
      </div>
      <div>
        <div>邮籍:</div>{{form.constemail}}
      </div>
      <div style="width: 100%;">
        <div style="width: auto;">系统建设（运维）资金来源:</div>{{form.fundFrom}}
      </div>
      <div style="width: 100%;">
        <div style="width: auto;">自行落实部门上云经费:</div>{{form.fundBySelf?'是':'否'}}
      </div>
      <div style="width: 100%;">
        <div>项目简介:</div>{{form.introduction}}
      </div>
      <div style="width: 100%;">
        <div>申请理由:</div>{{form.remarks}}
      </div>
    </div>
    <div class="title">申请资源</div>
    <div style="width: 100%;"><label style="margin-right: 10px;">服务商:</label>
      <span>{{form.cloudSupplier_label}}</span>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>服务器</div>
      </div>
      <el-table v-if="form.hosts" :data="form.hosts" style="width: 100%;margin-top: 13px;">
        <el-table-column label="资源类型">
          <template slot-scope="scope">
            {{scope.row.flavorType==1?'云服务器':scope.row.flavorType==2?'高性能服务器':scope.row.serverCode?'数据库':'存储产品'}}
          </template>
        </el-table-column>
        <el-table-column label="服务器名称 / 所属服务器">
          <template slot-scope="scope">
            <span v-if="scope.row.flavorType">{{scope.row.hostName}}</span>
            <span v-else-if="scope.row.serverCode">{{scope.row.hostInstanceName||scope.row.host.instanceName}}</span>
            <span v-else-if="!scope.row.hostInstanceNames.length"></span>
            <div v-else style="margin-bottom: 6px;" v-for="(item,index) in scope.row.hostInstanceNames" :key="index">
              {{item}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="可用域">
          <template slot-scope="scope">
            {{scope.row.availableDomain_label}}
          </template>
        </el-table-column>
        <el-table-column label="规格分类 / 资源类型">
          <template slot-scope="scope">
            {{scope.row.cloudFlavorCode_label}}
          </template>
        </el-table-column>
        <el-table-column label="规格">
          <template slot-scope="scope">
            <div v-if="scope.row.flavorType == 1">{{scope.row.cpuNumber}}vCPU； {{scope.row.memorySize}}G内存</div>
            <div v-if="scope.row.flavorType == 2">{{scope.row.cloudFlavorCode_desc}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作系统">
          <template slot-scope="scope">
            <div v-if="scope.row.flavorType == 1">{{osName(scope.row.osServerCode)}}</div>
          </template>
        </el-table-column>
        <el-table-column label="数据盘" width="300">
          <template slot-scope="scope">
            <div v-if="scope.row.flavorType" placement="top-start" width="500" trigger="hover">
              <div v-if="scope.row.flavorType==1">
                <div style="margin-bottom: 6px;"><label>
                    (共<span
                      style="color: #E83112;">{{scope.row.disks.length}}</span>块){{scope.row.disks.length?':':''}}</label>
                </div>
                <div style="margin:0 0 6px 16px;" v-for="(item,index) in scope.row.disks" :key="index">
                  <span>{{item.diskServerCode_label||item.diskServerName}}</span>，{{item.dataDiskSize}}GB
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="priceFlag" width="600">
          <template slot="header" slot-scope="scope">
            <div style="text-align: center;">费用</div>
            <div class="tab_wrap">
              <div>名称</div>
              <div>单价</div>
              <div>用量</div>
              <div>总价（天）</div>
            </div>
          </template>
          <template slot-scope="scope">
            <div class="tab_wrap" v-for="(item,index) in scope.row.meterageList||[scope.row.meterage]" :key="index">
              <div>{{item.resourceName}}</div>
              <div>{{item.useCount}}{{item.useCountUnit}}</div>
              <div> {{item.resourcePrice}}{{item.resourcePriceUnit}}</div>
              <div> ¥{{item.resourcePriceTotalStr}}</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>数据库</div>
      </div>
      <el-table v-if="form.databases" :data="form.databases" style="width: 100%;margin-top: 13px;">
        <el-table-column label="类型">
          <template slot-scope="scope">
            <span>{{ scope.row.serverCode_label }}</span>
          </template>
        </el-table-column>
        <el-table-column label="版本">
          <template slot-scope="scope">
            <span>{{ scope.row.databaseVersion }}</span>
          </template>
        </el-table-column>
        <el-table-column label="位数">
          <template slot-scope="scope">
            <span>{{ scope.row.systemDigits }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="priceFlag" width="600">
          <template slot="header" slot-scope="scope">
            <div style="text-align: center;">费用</div>
            <div class="tab_wrap">
              <div>名称</div>
              <div>单价</div>
              <div>用量</div>
              <div>总价（天）</div>
            </div>
          </template>
          <template slot-scope="scope">
            <div class="tab_wrap" v-for="(item,index) in scope.row.meterageList||[scope.row.meterage]" :key="index">
              <div>{{item.resourceName}}</div>
              <div>{{item.useCount}}{{item.useCountUnit}}</div>
              <div> {{item.resourcePrice}}{{item.resourcePriceUnit}}</div>
              <div> ¥{{item.resourcePriceTotalStr}}</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>存储产品</div>
      </div>
      <el-table v-if="form.storeProducts" :data="form.storeProducts" style="width: 100%;margin-top: 13px;">
        <el-table-column label="磁盘类型">
          <template slot-scope="scope">
            {{ scope.row.diskServerName }}
          </template>
        </el-table-column>
        <el-table-column label="磁盘用量">
          <template v-if='scope.row.dataDiskSize' slot-scope="scope">
            <span> {{ scope.row.dataDiskSize }}GB </span>
          </template>
        </el-table-column>
        <el-table-column label="存储类型">
          <template slot-scope="scope">
            <span> {{ scope.row.productCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="服务类型">
          <template slot-scope="scope">
            <span> {{ scope.row.diskCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="磁盘">
          <template slot-scope="scope">
            <span> {{scope.row.diskServerCode_label}}，{{scope.row.dataDiskSize}}GB</span>
          </template>
        </el-table-column>
        <el-table-column v-if="priceFlag" width="600">
          <template slot="header" slot-scope="scope">
            <div style="text-align: center;">费用</div>
            <div class="tab_wrap">
              <div>名称</div>
              <div>单价</div>
              <div>用量</div>
              <div>总价（天）</div>
            </div>
          </template>
        </el-table-column>
        <template slot-scope="scope">
          <div class="tab_wrap" v-for="(item,index) in scope.row.meterageList||[scope.row.meterage]" :key="index">
            <div>{{item.resourceName}}</div>
            <div>{{item.useCount}}{{item.useCountUnit}}</div>
            <div> {{item.resourcePrice}}{{item.resourcePriceUnit}}</div>
            <div> ¥{{item.resourcePriceTotalStr}}</div>
          </div>
        </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-if="priceFlag" style="margin-top: 10px;text-align: right;color: rgb(167,167,167);">
      预估费用：<span style="color: rgb(255,173,77);font-size: 24px;">¥{{parseInt(form.dailyPriceTotal)}}</span>/天
      <span style="margin-left: 20px;color: rgb(255,173,77);font-size: 24px;">¥{{parseInt(form.yearPriceTotal)}}</span>/年
    </div>
    <div class="title" style="margin-top: 30px;">安全产品</div>
    <div class="wrap1">
      <div style="width: 100%;"><span v-for="(item,index) in form.safeProducts" style="margin-left: 20px;"
          :key="index">{{item.productName}}</span></div>
    </div>
    <template v-if="false">
      <div v-if="otherFlag" class="title" style="margin-top: 30px;">其他</div>
      <div v-if="otherFlag" class="wrap2" style="padding-top: 1px;">
        <div style="display: flex;"><span style="font-weight: bold;margin-right: 10px;">说明:</span>{{form.remark}}</div>
        <div style="font-weight: bold;">文件:</div>
        <div style="display: flex;flex-wrap: wrap;">
          <img style="width: 145px;height: 145px;border-radius: 6px;margin:0 20px 20px 0;border: 1px solid #c0ccda;"
            v-for="(item,index) in form.files" :key="index" :src="item.id?(base_url+item.filePath):item.url"
            @click="handlePictureCardPreview(item.id?(base_url+item.filePath):item.url)" />
        </div>
      </div>
    </template>
    <el-dialog :visible.sync="dialogVisible">
      <div style="max-height: 90vh;overflow-y: scroll;">
        <img width="100%" :src="dialogImageUrl" alt="">
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    cloudUpList,
    cloudUpConfInfo,
    addCloudUp
  } from "@/api/cloud/cloud";
  import {
    resourcesUpDetail,
    listByCode,
    serviceByClazz,
  } from "@/api/resources/apply";
  import {
    getDicts
  } from "@/api/system/dict/data";

  export default {
    name: "detailindex",
    components: {},
    data() {
      return {
        form: null,
        otherFlag: true,
        priceFlag: false,
        configure: {
          available_domain: [], //可用域
          cloud_service_provider: [], //服务商
          storage_type: [], //系统盘类型
          codeList: [], //云服务器规格列表
          czxtList: [], //操作系统列表
          ccList: [], //数据盘类型
          fwcpList: [], //服务型磁盘类型
          wlfwqList: [], //高性能服务器资源类型
          sjkList: [], //数据库类型
          yyaqList: [], //安全产品
        },
        base_url: process.env.VUE_APP_BASE_API,
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    created() {
      //可用域
      getDicts("available_domain").then((response) => {
        this.configure.available_domain = response.data;
      });
      //服务商
      getDicts("cloud_service_provider").then((response) => {
        this.configure.cloud_service_provider = response.data;
      });
      //盘类型
      serviceByClazz({
        code: "cc"
      }).then((response) => {
        response.data.forEach((item) => {
          if (
            ["FCcc(tykcc)2", "FCcc_ssd", "spycc2"].indexOf(item.code) <
            0
          ) {
            this.configure.storage_type.push(item);
          }
          if (["spycc2"].indexOf(item.code) < 0) {
            this.configure.ccList.push(item);
          }
          if (
            ["fbscc_wjcc2", "FCcc(tykcc)2", "FCcc_ssd"].indexOf(
              item.code
            ) < 0
          ) {
            this.configure.fwcpList.push(item);
          }
        });
      });
      //操作系统
      serviceByClazz({
        code: "czxt"
      }).then((response) => {
        this.configure.czxtList = response.data;
      });
      //云服务器规格列表
      listByCode("spec_ecs").then((response) => {
        this.configure.codeList = response.data;
      });
      //高性能服务器资源类型列表
      serviceByClazz({
        code: "wlfwq"
      }).then((response) => {
        this.configure.wlfwqList = response.data;
      });
      //数据库类型列表
      serviceByClazz({
        code: "sjk"
      }).then((response) => {
        this.configure.sjkList = response.data;
      });
      //安全产品列表
      serviceByClazz({
        code: "yyaq"
      }).then((response) => {
        this.configure.yyaqList = response.data;
      });

    },
    mounted() {
      cloudUpConfInfo(this.$route.params.Id).then((res) => {
        let detail = res.data;
        detail.storeProducts.forEach((data) => {
          this.configure[
            data.productCode == "共享型" ? "ccList" : "fwcpList"
          ].some((it) => {
            if (it.code == data.diskServerCode) {
              data.diskServerCode_label = it.serviceName;
              return true;
            }
          });
          data.hostInstanceNames = [];
          if (data.hosts) {
            data.hosts.forEach((item) => {
              data.hostInstanceNames.push(item.instanceName);
            });
          }
        });
        detail.databases.forEach((data) => {
          this.configure.sjkList.some((it) => {
            if (it.code == data.serverCode) {
              data.serverCode_label = it.serviceName;
              return true;
            }
          });
        });
        detail.hosts.forEach((data) => {
          data.hostName = data.instanceName;
          //可用域
          this.configure.available_domain.some((item) => {
            if (item.dictValue == data.availableDomain) {
              data.availableDomain_label = item.dictLabel;
              return true;
            }
          });
          //系统盘类型
          if (data.osDisk) {
            this.configure.storage_type.some((item) => {
              if (item.code == data.osDisk.diskServerCode) {
                data.osDisk.diskServerCode_label = item.serviceName;
                return true;
              }
            });
          }
          //数据盘类型
          if (data.disks) {
            data.disks.forEach((item) => {
              this.configure.ccList.some((it) => {
                if (it.code == item.diskServerCode) {
                  item.diskServerCode_label = it.serviceName;
                  return true;
                }
              });
            });
          } else {
            data.disks = [];
          }
          //规格
          if (data.flavorType == 1) {
            this.configure.codeList.some((item) => {
              if (item.specCode == data.cloudFlavorCode) {
                data.cloudFlavorCode_label = item.specName;
                data.cloudFlavorCode_desc = item.desc;
                return true;
              }
            });
          }
          if (data.flavorType == 2) {
            this.configure.wlfwqList.some((item) => {
              if (item.code == data.cloudFlavorCode) {
                data.cloudFlavorCode_label = item.serviceName;
                data.cloudFlavorCode_desc = item.remark;
                return true;
              }
            });
          }
        });
        this.form = detail;
      });
    },
    methods: {
      osName(code) {
        let serviceName
        this.configure.czxtList.forEach(item => {
          if (item.code == code) {
            serviceName = item.serviceName
          }
        })
        return serviceName
      },
      //文件预览
      handlePictureCardPreview(url) {
        this.dialogImageUrl = url;
        this.dialogVisible = true;
      },
    },
  };
</script>

<style scoped lang="less">
  .dialog {
    padding-right: 20px;
    font-size: 12px;

    .title {
      text-align: left;
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: bold;
      padding-left: 4px;
      border-left: 4px solid #38b3aa;
    }

    .wrap {
      display: flex;
      background: #faf9ff;
      margin-top: 20px;
      border-radius: 10px;

      .wrap_title {
        padding: 0 10px;
        background: #f4f4f4;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;

        div {
          height: 100%;
          width: 14px;
          font-weight: bold;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }

      .wrap_item {
        display: flex;
        margin-top: 20px;

        div:first-child {
          width: 90px;
          font-weight: bold;
        }

        i {
          line-height: 28px;
          margin-right: 10px;
          font-size: 20px;
          color: #e83112;
        }
      }
    }

    .wrap1 {
      padding: 0 20px 20px 0px;
      background: #faf9ff;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 30px;
      padding-left: 20px;
      overflow-x: hidden;
      min-width: 1380px;
      // justify-content: space-between;
      border-radius: 10px;

      div {
        margin-top: 20px;
        width: 33.3333%;
        // margin-left: 20px;
        min-width: 340px;
        display: flex;
        border-bottom: 1px solid rgba(192, 196, 204, 0.5);
        padding-bottom: 10px;

        div {
          width: 100px;
          min-width: 100px;
          font-weight: bold;
          margin: 0;
          display: flex;
          padding-right: 10px;
          // justify-content: flex-end;
          color: #606266;
          border-bottom: 0px solid rgba(192, 196, 204, 0.5);
        }
      }
    }

    .wrap2 {
      padding: 0 20px 20px 20px;
      background: #faf9ff;
      margin-bottom: 30px;
      justify-content: space-between;
      border-radius: 10px;

      div {
        margin-top: 20px;
      }
    }

    .wrap3 {
      padding: 20px;
      background: #faf9ff;
      margin-bottom: 30px;
      justify-content: space-between;
      border-radius: 10px;
    }

    .tab_wrap {
      display: flex;
      justify-content: space-between;

      div {
        width: 25%;
        padding: 10px 0;
      }

      div:first-child {
        font-weight: bold;
      }
    }
  }
</style>
